
<template>
  <div id="c1"></div>
</template>
<style>
.g2-guide-html {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 0.1
}

.g2-guide-html .title {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 300;
}

.g2-guide-html .value {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}
</style>
<script>
export default {
  name: "DonutHalf",
  data(){
    return{
      basicColumnChartProp:{
        data:[{ genre: 'Sports', sold: 275 },
          { genre: 'Strategy', sold: 115 },
          { genre: 'Action', sold: 120 },
          { genre: 'Shooter', sold: 350 },
          { genre: 'Other', sold: 150 }],
        container:'c1',
        width:700,
        height:600
      },
    }
  },
  methods:{
    test(){
      const data = this.basicColumnChartProp.data;
      const chart = new G2.Chart({
        container: this.basicColumnChartProp.container,
        width : this.basicColumnChartProp.width,
        height : this.basicColumnChartProp.height
      });
      chart.source(data);
      chart.interval().position('genre*sold').color('genre')
      chart.render();
    }
  },
  mounted() {
    this.test();
  },
}
</script>